<template>
    <div style="width: 100%">
        <h3 style="letter-spacing: 1px;font-weight: 400;padding-bottom: 20px">购物车</h3>

        <div v-loading="loading">

            <el-card v-for="(item, index) in cartList" :key="index" class="box-card">
                <div>
                    <div style="float: left;line-height: 100px;padding-right: 20px">
                        <el-checkbox @change="handleCheck" v-model="selectList[index].checked"></el-checkbox>
                    </div>
                    <img class="item-film-img" alt="" src="../../assets/img/film.png"/>
                    <div style="float: left;">
                        <div class="item-film-name">《{{ item.film.name }}》</div>
                        <div class="item-film-seat">座位 : {{ item.cart.seats }}</div>
                        <div class="item-film-seat">手机号码 : {{ item.cart.phone }}</div>
                        <div class="item-film-time">开场时间 :
                            <span style="color: red">{{ item.arrangement.date }} - {{ item.arrangement.startTime }}</span>
                        </div>
                    </div>
                    <div style="float: right;color: #f34d41;letter-spacing: 2px; line-height: 100px;padding-right: 5px">
                        ￥{{ item.cart.price }}
                        <el-button @click="handleDelete(index)"
                                   type="text"
                                   style="color: red;padding-left: 50px"
                                   icon="el-icon-delete">删除
                        </el-button>
                    </div>
                </div>
            </el-card>

            <div v-if="cartList.length !==0" style="height: 60px;background: #91949c">
                <div>
                    <div style="float: left;line-height: 60px;padding: 0 20px;font-size: 14px">
                        <el-checkbox @change="handleCheckAll" v-model="checkAll">全 选</el-checkbox>
                    </div>
                    <el-button @click="submitCart" type="text" class="sub-btn">全部结算</el-button>
                    <div class="order-footer1">合计 : ￥{{ price }}</div>
                </div>
            </div>
        </div>

        <el-dialog
                title="扫码支付"
                :show-close="false"
                width="30%"
                :visible.sync="centerDialogVisible"
        >
            <div>
                <img class="c-img" src="../../assets/img/c.jpeg" alt="">
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitPay">支 付 成 功</el-button>
  </span>
        </el-dialog>

    </div>
</template>

<script>
    import {DeleteCartById, ListCarts} from "@/api/cart"
    import {CreateOrder} from "@/api/order";

    export default {
        data() {
            return {
                i: 0,
                success: false,
                centerDialogVisible: false,
                loading: false,
                price: 0,
                selectList: [],
                checkAll: false,
                cartList: [],
                uid: localStorage.getItem("uid"),
            }
        },

        mounted() {
            this.loadCarts()
        },

        methods: {

            loadCarts() {
                this.loading = true;
                ListCarts(this.uid).then(res => {
                    setTimeout(() => {
                        this.cartList = res.data
                        for (let i = 0; i < this.cartList.length; i++) {
                            this.selectList[i] = {checked: false, cart: this.cartList[i].cart}
                        }
                        this.loading = false
                    }, 700)
                })
            },

            handleCheck() {
                this.checkOut()
            },

            handleCheckAll() {
                if (this.checkAll) {
                    this.changeAllChecked(true)
                    this.checkOut()
                } else {
                    this.changeAllChecked(false)
                    this.price = 0
                }
            },

            changeAllChecked(status) {
                for (let i = 0; i < this.selectList.length; i++) {
                    this.selectList[i].checked = status
                }
            },

            checkOut() {
                this.price = 0
                for (let i = 0; i < this.selectList.length; i++) {
                    if (this.selectList[i].checked) {
                        this.price += this.selectList[i].cart.price
                    }
                }
            },

            handleDelete(index) {
                DeleteCartById(this.cartList[index].cart.id).then(res => {
                    console.log(res)
                    if (res.success) {
                        this.cartList.splice(index, 1)
                    }
                })
            },

            submitCart() {
                this.$confirm('请您仔细确认订单金额为' + this.price + '元, 是否继续?', '提示', {
                    confirmButtonText: '确认支付',
                    cancelButtonText: '取消支付',
                    type: 'success',
                    center: true
                }).then(() => {
                    for (let i = 0; i < this.selectList.length; i++) {
                        if (this.selectList[i].checked) {
                            this.selectList[i].cart.status = 2
                            this.centerDialogVisible = true
                            this.i = i
                        }
                    }
                }).catch(() => {
                    for (let i = 0; i < this.selectList.length; i++) {
                        if (this.selectList[i].checked) {
                            this.selectList[i].cart.status = 0
                            CreateOrder(this.selectList[i].cart).then(res => {
                                if (res.success) {
                                    DeleteCartById(this.selectList[i].cart.id)
                                    this.$message({
                                        type: 'warning',
                                        message: '用户已取消支付, 请您前往我的订单进行支付'
                                    });
                                    this.loadCarts()
                                }
                            })
                        }
                    }
                });
            },

            submitPay() {
                const i = this.i
                CreateOrder(this.selectList[i].cart).then(res => {
                    if (res.success) {
                        this.centerDialogVisible = false
                        DeleteCartById(this.selectList[i].cart.id)
                        this.$message({
                            type: 'success',
                            message: '恭喜你支付成功!'
                        });
                        this.loadCarts()
                    }
                })
            },

        },

    }
</script>

<style scoped>

    .box-card {
        margin-bottom: 5px;
    }

    .el-card__header {
        background: #C0C4CC;
    }

    .item-film-img {
        float: left;
        width: 80px;
        height: 100px;
        padding-bottom: 20px;
        padding-right: 10px;
    }

    .item-film-name {
        letter-spacing: 2px;
        font-weight: 500;
        font-size: 18px;
        padding-bottom: 13px;
    }

    .item-film-seat {
        letter-spacing: 1px;
        font-size: 12px;
        padding-bottom: 8px;
        padding-left: 10px;
        color: #91949c;
    }


    .item-film-time {
        font-size: 12px;
        padding-left: 10px;
        letter-spacing: 1px;
        color: #91949c;
    }

    .c-img {
        width: 100%;
        height: 100%;
    }

    .sub-btn {
        float: right;
        color: #000000;
        height: 60px;
        width: 120px;
        background: #f34d41;
        letter-spacing: 2px;
        line-height: 33px;
        text-align: center;
        font-weight: 500;
        font-size: 18px;
    }

    .order-footer1 {
        float: right;
        line-height: 60px;
        padding-right: 40px;
    }

    a {
        color: #333333;
    }

    .di {
        text-align: center;
        font-size: 20px;
        letter-spacing: 3px;
        font-weight: bold;
        padding-top: 10px;
    }
</style>